import React, { useState, useEffect, useRef, useMemo, useCallback ,Fragment} from 'react'
import { Tabs , Calendar ,Radio} from 'antd-mobile';
import '../memberDetail/index.scss'
const RadioItem = Radio.RadioItem;
const ConsumeModel: PageComponent = props => {   
    let tHeader_person=[{//个人的
        label:'序号',
        width:'0.8rem'
    },{
        label:'注册用户',
        key:'userName',
        width:'2rem'
    },{
        label:'消费额',
        key:'money',
        width:'1.5rem'
    },{
        label:'消费时间',
        key:'createDate',
    }]
    const [tHeader, setTHeader] = useState(tHeader_person)
    const [list, setList] = useState([])
    console.log("2222",props)
    useEffect(()=>{
        setList(props.listData)
        console.log("list2",props.listData)
    },[props.listData])
    useEffect(()=>{
        if(props.currentTabIndex==1){
            let _tHeader_person=[{
                label:'序号',
                width:'0.6rem'
            },{
                label:'BD人员',
                key:'userName',
                width:'1.2rem'
            },{
                label:'注册用户',
                key:'userName',
                width:'1.2rem'
            },{
                label:'消费额',
                key:'money',
                width:'1.5rem'
            },{
                label:'消费时间',
                key:'payTime',
            }]
            setTHeader(_tHeader_person)
            
        }else{
            setTHeader(tHeader_person)
        }
    },[props.currentTabIndex])
    
    
    return (
        <div className="peraonal-detail">
            <div className="tableBox">
                <div className="t-header flexR">
                    {
                        tHeader.map((item,index)=>(
                        <div className={`${item.width?'':'flexGrow'}`} key={index} style={{width:item.width||'auto'}}>{item.label}{item.label=='消费额'&&<span className="unit">（元）</span>}</div>
                        ))
                    }
                </div>
                <div className="t-body">
                    {
                        props.totalListLength>0&&list.map((item,index)=>(
                            <div className="t-row flexR" key={index}>
                                {
                                    tHeader.map((item2,index2)=>(
                                        <div className={`t-td flexC ${item2.width?'':'flexGrow'}`} key={index2} style={{width:item2.width||'auto'}}>
                                            {item2.label=='序号'&&(index+1)}
                                            {
                                                props.currentTabIndex==1&&item2.label=='BD人员'&&(item.promoteUserName||'-')
                                            }
                                            {item2.label=='注册用户'&&(item.userName)}
                                            {item2.label=='消费额'&&item.money}
                                            {item2.label=='消费时间'&&<Fragment>
                                                <p className="day">{item.createDate.substring(0,10)}</p>
                                                <p className="hour">{item.createDate.substring(11,20)}</p>
                                            </Fragment>}
                                        </div>
                                    ))
                                }
                            </div>
                        ))
                    }
                    {
                        props.totalListLength==0&&<div className="no-data flexC">
                            <img src={require('../../../../assets/image/empty/null_image@2x.png')}></img>
                            <p>暂无相关数据</p>
                        </div>
                    }
                </div>
            </div>
        </div>
    )
}
export default ConsumeModel